<template>
  <div>
    <v-title>查看个人信息</v-title>
    <Nav></Nav>
    <el-row>
      <el-col :span="6" :offset="4">
        <h2>查看个人信息</h2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="3" :offset="7">
        <span class="title">用户名</span>
      </el-col>
      <el-col :span="5">
          <span class="content">{{userInfo.username}}</span>
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="3" :offset="7">
        <span class="title">真实名字</span>
      </el-col>
      <el-col :span="5">
        <span class="content">{{userInfo.realName}}</span>
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="3" :offset="7">
        <span class="title">余额</span>
      </el-col>
      <el-col :span="5">
        <span class="contentAccount">￥{{account}}</span>
      </el-col>
    </el-row>
    <br />
    <br />
    <br /><br />
    <!-- <el-row>
      <el-col :span="2" :offset="9">
        <el-button type="primary" @click="update">返回</el-button>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-button type="info" @click="onReset">重置</el-button>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import VTitle from "@/components/Title";
import Nav from "@/components/Nav";
import { getUserInfo, getUserAccount } from "@/api/index";
export default {
  name: "",
  created() {
      this.getUserInfo()
  },
  components: {
    VTitle,
    Nav
  },
  data() {
    return {
      userInfo: {},
      account: 0
    };
  },
  methods: {
    async getUserInfo() {
        let that = this;
        //查询用户信息
        await getUserInfo().then((res) => {
          if (res.code == "200") {
              that.userInfo = res.data
          } else {
            this.$message.error(res.msg);
            return;
          }
        });
        //获取余额
        await getUserAccount().then((res) => {
          if (res.code == "200") {
              that.account = res.data.account
          } else {
            this.$message.error(res.msg);
            return;
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
h2 {
  float: left;
  height: 34px;
  line-height: 34px;
  font-size: 24px;
  position: relative;
  margin-bottom: 20px;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
}
.title {
  line-height: 34px;
  font-size: 16px;
  font-weight: bold;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
  margin-bottom: 20px;
}
.content {
  line-height: 34px;
  font-size: 16px;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
  margin-bottom: 20px;
}
.contentAccount {
  line-height: 34px;
  font-size: 16px;
  font-weight: bold;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
  margin-bottom: 20px;
  color: red;
}
</style>